<template>
	<view class="wp">
		<view class="top bg">
			<view class="c_imgs">
				<view class="img_item" v-for="(item,idx) in imgs" @click="previewImg(idx)">
					<image :src="item" mode="" ></image>
					<text @click.stop="deleteImg(idx)">×</text>
				</view>
			</view>
			<view class="add" @click="addimg">
				<image src="/static/order/pingjia.png" mode="widthFix"></image>
				<view>添加图片</view>
			</view>
		</view>
		<view class="bg score">
			<view class="tit">店铺评价</view>
			<uni-rate size="18" v-model="score" @change="onChange"/>
		</view>
		<view class="content">
			<textarea name="" v-model="textareaValue" placeholder="展开说说对商品的想法吧…"></textarea>
		</view>
		<view class="btn" @click="add">发布</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				info: {},
				imgs: [],
				score: 5,
				textareaValue: ''
			}
		},
		onLoad(option) {
			this.id = option.id;
		},
		methods: {
			onChange(e) {
				this.score = e.value;
			},
			add() {
				var that = this;
				that.$axios('Op/comment', "POST", 'order', {
					orderid: that.id,
					level: that.score,
					content: that.textareaValue,
					images: JSON.stringify(that.imgs)
				}).then(res => {
					if (res.data.code == 200) {
						that.$api.msg('评价成功！');
						setTimeout(()=>{
							uni.redirectTo({
								url: './evaluateSuccess?level='+that.score
							});
						},1000)
					}
				})
			},
			getInfo(){
				this.$axios('Op/preComment', "POST", 'order', {
					orderid: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data
					}
				})
			},
			// 选择图片
			addimg() {
				uni.chooseImage({
					count: 9,
					success:res=>{
						var path = res.tempFilePaths;
						path.forEach((image)=>{
							this.realUpload(image);
						})
					}
				})
			},
			// 上传服务器
			realUpload(image){
				let token = uni.getStorageSync('token');
				var that = this;
				let arr = '';
				uni.showLoading({
					title: '上传中,请稍后'
				});
				uni.uploadFile({
					url: that.$url.state.url.upload,
					filePath: image,
					name: 'a',
					header: {
						token: token
					},
					formData: {
						'file': 'a'
					},
					success: upres => {
						let data = JSON.parse(upres.data);
						if (data.code == 200) {
							arr = data.data.url;
							that.imgs.push(arr);
							uni.hideLoading();
						}
					},
					fail() {
						setTimeout(() => {
							that.$api.msg('上传失败，请重试')
						}, 100)
					},
				})
			},
			// 删除图片
			deleteImg(e) {
				this.imgs.splice(e, 1);
			},
			// 预览图片
			previewImg(idx){
				uni.previewImage({
					current: idx,
					urls: this.imgs
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
}
.wp{
	padding: 30rpx;
	padding-bottom: 200rpx;
}
.bg{
	background: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}
.top{
	.c_imgs{
		display: flex;
		margin-right: -20rpx;
		flex-wrap: wrap;
		.img_item{
			position: relative;
			width: 200rpx;
			height: 200rpx;
			margin-right: 14rpx;
			margin-bottom: 8rpx;
			image{
				width: 100%;
				height: 100%;
			}
			text{
				background: #999;
				border-radius: 50%;
				color: #fff;
				height: 50upx;
				line-height: 40upx;
				font-size: 40upx;
				position: absolute;
				top: -10upx;
				right: -10upx;
				text-align: center;
				width: 50upx;
				opacity: .8;
				z-index: 9;
			}
		}
	}
	.add{
		text-align: center;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
		margin-top: 30rpx;
		image{
			width: 52rpx;
		}
	}
}
.score{
	display: flex;
	.tit{
		margin-right: 20rpx;
	}
}
.content{
	width: 100%;
	height: 598rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	padding: 30rpx;
	textarea{
		width: 100%;
		height: 100%;
	}
}
.btn{
	width: 306rpx;
	height: 94rpx;
	border-radius: 47rpx;
	background: linear-gradient( 90deg, #A14FE7 0%, #510AAB 100%);
	position: fixed;
	bottom: 80rpx;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 32rpx;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 94rpx;
	text-align: center;
}
.opacity8{
	opacity: 0.8;
}
</style>
